<template>
    <div class="operation">
        <div ref="left" class="operation__left">

            <template>
                <i class="iconfont icon-houtui back-btn" @click="backClick"></i>
                <span class="title" v-text="title"></span>
            </template>

            <slot name="left"></slot>
        </div>
        <div ref="right" class="operation__right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script type="text/ECMAScript-6">
    import {items} from '../../views/Home/items'

    /**
     * @author 白雨浓
     * @date 2018/5/9 18:08
     *
     * 顶部操作栏
     **/
    export default {
        name: 'Operation',
        data() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {

            })
        },
        computed: {
            title() {
                const path = this.$route.path;
                for (const item of items) {
                    if (item.path === path) {
                        return item.title;
                    }
                }
            }
        },
        methods: {
            backClick() {
                this.$router.go(-1);
                this.$emit('exit');
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .operation {
        display flex
        justify-content space-between
        align-items center
        margin auto
        padding 5px
        color #eee
    }

    .operation__left {
        display flex
        justify-content flex-start
        align-items center
        width 50%
    }

    .operation__right {
        display flex
        justify-content flex-end
        align-items center
        width 50%
    }

    .back-btn {
        cursor pointer
    }

    .title {
        margin-left 10px
        font-size 2.2ex
    }
</style>
